<template>
 <div>
    <div id="slotPh" v-for="(items,index) in phImg" :key="index">
    <div><img class="left-ph-img" :src="items.cover" alt=""></div>
    <ul>
        <li v-for="(items2,index2) in phList" :key="index2">
            <span>{{items2}}</span>
            <!-- <span>{{items.promote}}</span> -->
            <!-- <span>{{items.songRanking}}</span> -->
            <!-- <span class="name2" v-if="items.name2!==''">{{items.name2}}</span> -->
            <span class="right-singer-ph">{{items2.updateFrequency}}</span>
        </li>
        <div class="extend">
        <span>展开更多</span><span class="iconfont">&#xe65f;</span>
    </div>
    </ul>
    
 </div>   
 </div>
</template>

<script>
import '../../public/font_home/font-icon2/iconfont.js'
export default {
    data() {
        return {
            // phImg:[]
            // phLists:[]
        }
    },
    props:{
        phList:{
            typeof:Object || Array,
            default:_=>{
                return{}
            }
        },
        phImg:{
            typeof:Object || Array,
            default:_=>{
                return{}
            }
        },
       
    },
 watch:{
    // phList:{
    //     handler(newValue,oldValue){
    //        this.phLists = newValue
    //        console.log(newValue)
    //     },
    //     deep:true
    // }
    // data(newValue,oldValue){
    //        this.phImg = newValue
    //        console.log(newValue)
    //     }
   },
     mounted() {
        console.log(this.phImg)
        console.log(this.phList)
        },
        methods: {
            
        }
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon2/iconfont.ttf?t=1658068442606') format('truetype');
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
#slotPh{
    margin-bottom: 80px;
    width: 100%;
div,span,ul,li,img{
    font-size: 0;
}
display: flex;
.left-ph-img{
        width: 215px;
        border-radius: 5px;
   }
   ul{
        width: 100%;
    position: relative;
     li:nth-child(-n+3){
        span:first-child{
        color: red;
    }
    }
 li:nth-child(odd){
        background: #F9F9F9;
    }
    
li{
    margin-left: 40px;
    padding:14px 14px;
    width: 100%;
    span:first-child{
        color: #989898;
    }
    span{
        margin-right: 12px;
        font-size: 16px;
        color: #363636;
    }
    span:nth-child(2){
        color: #989898;
    }
    .name2{
        color: #989898;
    }
    .right-singer-ph{
        float: right;
        color: #989898;
    }
}
li:hover{
    background: #F4F4F4;
    color: #989898;
}
   }
  .extend{
    cursor: pointer;
    span{
        font-size: 15px;
         color: #989898;
    }
    position: absolute;
    left: 50px;
    margin-top: 10px;
  }
   .extend:hover{
    span{
        color:#363636;
    }
   }
   
}

</style>